@import 'scss-imports/variables';
@import 'mixins/text';

:host {
  align-items: center;
  border-bottom: 1px solid var(--lines);
  box-sizing: border-box;
  color: var(--fg2);
  cursor: pointer;
  display: grid;
  font-weight: 500;
  grid-gap: 8px;
  min-height: 48px;
  min-width: fit-content;
  padding: 0;
  position: relative;
  width: 100%;

  &:hover {
    background-color: var(--hover-bg);

    .cell-name .name {
      background: linear-gradient(90deg, var(--hover-bg) 0%, var(--hover-bg) calc(100% - 11px), transparent 100%);
    }
  }

  &.selected {
    background-color: var(--bg1);

    .cell-name::before {
      background-color: var(--primary);
      content: '';
      height: 100%;
      left: 0;
      opacity: 1;
      position: absolute;
      top: 0;
      width: 6px;
      z-index: 1;
    }

    .cell-name .name {
      background: linear-gradient(90deg, var(--bg1) 0%, var(--bg1) calc(100% - 11px), transparent 100%);
    }
  }

  .app-logo {
    margin-right: 8px;
    max-height: 35px;
    max-width: 35px;
    min-width: 35px;
    overflow: hidden;

    img {
      display: block;
      height: auto;
      max-width: 100%;
      object-fit: contain;
    }
  }

  .cell {
    align-items: center;
    display: inline-flex;
    min-height: 48px;

    @media (max-width: $breakpoint-tablet) {
      display: none;
    }

    &:first-child {
      left: 0;
      position: sticky;

      @media (max-width: $breakpoint-tablet) {
        display: inline-flex;
      }
    }

    &:nth-child(2) {
      @media (max-width: $breakpoint-tablet) {
        display: inline-flex;

        > div {
          padding: 0;
        }
      }
    }
  }

  .cell-checkbox {
    padding-left: 15px;
    padding-right: 15px;
  }

  .cell-name {
    align-items: stretch;
    font-weight: bold;

    .name {
      align-items: center;
      background: linear-gradient(90deg, var(--bg2) 0%, var(--bg2) calc(100% - 11px), transparent 100%);
      display: inline-flex;
      margin: 1px;
      padding-right: 15px;
    }

    .app-name {
      @include line-clamp(2);
    }
  }

  .cell-action {
    justify-content: center;
  }
}

.cell-clickable {
  @media(max-width: $breakpoint-tablet) {
    display: inline;
    position: absolute;
    right: 0;
  }
  display: none;
}
